<template>
  <div class="home">
    <router-link to="/listPage" tag="div" class="search">
      <yd-icon name='search' size='.3rem'/>
      <span class="placeholder">公益商城</span>
    </router-link>
    <yd-slider autoplay='3000' class='slider' paginationActiveColor='#fff'>
      <yd-slider-item>
        <a href="http://www.ydcss.com" class='slider_con'
           :style='`background-image: url("http://static.ydcss.com/uploads/ydui/1.jpg")`'>
        </a>
      </yd-slider-item>
      <yd-slider-item>
        <a href="http://www.ydcss.com" class='slider_con'
           :style='`background-image: url("http://static.ydcss.com/uploads/ydui/2.jpg")`'>
        </a>
      </yd-slider-item>
      <yd-slider-item>
        <a href="http://www.ydcss.com" class='slider_con'
           :style='`background-image: url("http://static.ydcss.com/uploads/ydui/3.jpg")`'>
        </a>
      </yd-slider-item>
    </yd-slider>
    <yd-flexbox class="home_tab nav">
      <yd-flexbox-item @click.native='$router.push("/sign")'>
        <div class="text-center">
          <yd-icon name="compose"></yd-icon>
          <p>打卡有礼</p>
        </div>
      </yd-flexbox-item>
      <yd-flexbox-item @click.native='$router.push("/answers")'>
        <div class="text-center">
          <yd-icon name="question"></yd-icon>
          <p>公益问答</p>
        </div>
      </yd-flexbox-item>
      <yd-flexbox-item>
        <div class="text-center">
          <yd-icon name="question"></yd-icon>
          <p>每日抽奖</p>
        </div>
      </yd-flexbox-item>
      <yd-flexbox-item>
        <div class="text-center">
          <yd-icon name="question"></yd-icon>
          <p>抢福利</p>
        </div>
      </yd-flexbox-item>
    </yd-flexbox>
    <div class="average flex home_tab spike">
      <div class="average flex column home_tab_li spike_comm">
        <div class="flex column">
          <router-link to="/spike" class="flex column f1 comm_li" v-for="item in spike" :key='item.id'>
            <h3>{{ item.title }}</h3>
            <div class="flex average middle f1 primary">
              <p>活动结束</p>
              <p>{{ item.endTime }}</p>
            </div>
            <box :bgImg='item.imgSrc' prop="100:179"/>
          </router-link>
        </div>
        <div class="flex spike_notime">
          <router-link to="/spike" class="flex column comm_li" v-for="item in spikeLi" :key="item.id">
            <h3>{{ item.title }}</h3>
            <p class="text-left primary">活动结束</p>
            <p class="text-right primary">{{ item.endTime }}</p>
            <box :bgImg='item.imgSrc' prop="64:70"/>
          </router-link>
        </div>
      </div>
      <div class="average flex column average home_tab_li">
        <router-link to="/assemble" class="flex column comm_li">
          <h3>一起公益</h3>
          <div class="f1 flex middle desc">拼团</div>
          <box bgImg='http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg' prop="100:179"
               class='comm_logo'/>
        </router-link>
        <router-link to="/onTrial/trial/all" class="flex column comm_li">
          <h3>0元试吃</h3>
          <div class="f1 flex middle desc">拼团</div>
          <box bgImg='http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg' prop="100:179"
               class='comm_logo'/>
        </router-link>
      </div>
    </div>
    <div class="home_tab benefit">
      <h3 class="text-center tab_title">惠民专区
        <router-link to="/benefit/0" class="more">查看更多</router-link>
      </h3>
      <grid guuter=".1rem" class="wrap flex">
        <router-link to="/benefit/1" class="tk-grid-6 flex column benefit_li">
          <h3 class="title">善源有品专区</h3>
          <div class="f1 text-hidden">
            鲁花压榨5s花生油10斤
          </div>
          <box bgImg='http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg' class='comm_logo'
               prop='49:152'></box>
        </router-link>
        <router-link to="/benefit/2" class="tk-grid-6 flex column benefit_li">
          <h3 class="title">品牌专区</h3>
          <div class="f1 text-hidden">
            善源岩壤石板大米 盒装10斤
          </div>
          <box bgImg='http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg' class='comm_logo'
               prop='49:152'></box>
        </router-link>
        <div class="tk-grid-6 flex column benefit_li">
          <h3 class="title">公益有我</h3>
          <div class="flex middle f1">
          </div>
          <box bgImg='http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg' class='comm_logo'
               prop='49:152'></box>
        </div>
        <div class="tk-grid-6 flex column benefit_li">
          <h3 class="title">益起旅游</h3>
          <div class="flex middle f1">
          </div>
          <box bgImg='http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg' class='comm_logo'
               prop='49:152'></box>
        </div>
      </grid>
    </div>
    <div class="home_tab activity">
      <h3 class="text-center tab_title">
        热门活动
      </h3>
      <box bgImg='http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg' prop='62:362'
           class='activity_logo'></box>
      <div class="average flex activity_con">
        <div class="activity_li">
          <box bgImg='http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'></box>
        </div>
        <div class="activity_li">
          <box bgImg='http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'></box>
        </div>
        <div class="activity_li">
          <box bgImg='http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'></box>
        </div>
        <div class="activity_li">
          <box bgImg='http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'></box>
        </div>
      </div>
    </div>
    <div class="home_tab farmers">
      <h3 class="text-center tab_title">惠农专区</h3>
      <div class="average flex">
        <div class="home_tab_li">
          <box bgImg='http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg' prop="78:190">
            <div class="farmers_con">
              <h3>农资</h3>
              <div class="desc">副标题</div>
            </div>
          </box>
        </div>
        <div class="home_tab_li">
          <box bgImg='http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg' prop="78:190">
            <div class="farmers_con">
              <h3>农资</h3>
              <div class="desc">副标题</div>
            </div>
          </box>
        </div>
      </div>
    </div>
    <div class="home_tab farmers">
      <h3 class="text-center tab_title">生活专区</h3>
      <div class="average flex">
        <div class="home_tab_li">
          <box bgImg='http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg' prop="78:190">
            <div class="farmers_con">
              <h3>理财</h3>
              <div class="desc">副标题</div>
            </div>
          </box>
        </div>
        <div class="home_tab_li">
          <box bgImg='http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg' prop="78:190">
            <div class="farmers_con">
              <h3>积分商城（益客鉴赏</h3>
              <div class="desc">副标题</div>
            </div>
          </box>
        </div>
      </div>
    </div>
    <div class="home_tab advertisement">
      <div class="h2 text-center tab_title">广告</div>
      <box bgImg='http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg' prop="30:190"/>
    </div>
    <div class="home_tab guess">
      <h2 class="text-center tab_title">益起发现</h2>
      <yd-tab v-model='activeIndex'>
        <yd-tab-panel :label="item.label" v-for='(item, index) in guessLi' :key='index'>
          <yd-list>
            <yd-list-item v-for='item in guessCommLi' :key="item.id">
              <box :bgImg="item.imgSrc" slot = 'img' class='guess_comm'></box>
              <h3 class="title" slot = 'title'>{{item.title}}</h3>
              <yd-list-other class="guess_li" slot = 'other'>
                <div class="desc">价格： ￥{{ item.price }}</div>
                <div class="desc">积分： {{ item.integral }}</div>
              </yd-list-other>
            </yd-list-item>
          </yd-list>
        </yd-tab-panel>
      </yd-tab>
    </div>
  </div>
</template>
<script>
export default {
  name: 'home',
  data () {
    return {
      activeIndex: 0,
      guessLi: [],
      guessCommLi: [],
      spikeLi: [],
      spike: {}
    }
  },
  watch: {
    activeIndex: {
      immediate: true,
      handler (val) {
        this.change(val)
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.spikeLi = [{
        id: '1232154311232',
        endTime: '01:09:07',
        title: '限时秒杀',
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
      }, {
        id: '12321543112323',
        endTime: '01:09:07',
        title: '秒杀',
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
      }, {
        endTime: '01:09:07',
        id: '12321543112123',
        title: '秒杀',
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
      }]
      this.spike = this.spikeLi.splice(0, 1)
      this.guessLi = [{
        label: '全部',
        val: ''
      }, {
        label: '有品',
        val: '0'
      }, {
        label: '鲁花',
        val: '1'
      }, {
        label: '小家电',
        val: '2'
      }, {
        label: '有品',
        val: '3'
      }, {
        label: '鲁花',
        val: '4'
      }, {
        label: '小家电',
        val: '5'
      }]
    },
    change (val) {
      this.guessCommLi = [{
        id: '01',
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        title: '标题',
        price: '99.00',
        integral: '5000'
      }, {
        id: '02',
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        title: '标题',
        price: '99.00',
        integral: '5000'
      }, {
        id: '03',
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        title: '标题',
        price: '99.00',
        integral: '5000'
      }, {
        id: '04',
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        title: '标题',
        price: '99.00',
        integral: '5000'
      }]
    }
  }
}
</script>
<style lang="scss" scoped>
  .home {
    padding: 0 #{$padding};
    .search {
      background-color: #fff;
      border-radius: 1em;
      padding: .1rem 1em;
      margin: .2rem 0;
      .placeholder {
        color: #999;
        margin-left: 1em;
      }
    }
    .slider {
      .slider_con {
        height: 2.36rem;
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
      }
      /deep/ .yd-slider-pagination {
        justify-content: flex-end;
        padding-right: .3rem;
        .yd-slider-pagination-item-active {
          width: 6px;
        }
      }
    }
    .home_tab {
      margin: .2rem 0;
      padding: .2rem 0 .1rem;
      .tab_title {
        position: relative;
        font-size: 14px;
        margin-bottom: .1rem;
        .more {
          position: absolute;
          right: 0;
          top: 0;
          font-size: 12px;
          color: #999;
        }
      }
      .home_tab_li {
        margin-left: .1rem;
        &:first-child {
          margin-left: 0;
        }
      }
    }
    .nav {
      background-color: #fff;
    }
    .spike {
      background-color: #eee;
      padding: 0;
      .home_tab_li {
        .primary {
          margin: .1rem 0;
        }
        .comm_li {
          background-color: #fff;
          box-sizing: border-box;
          width: 100%;
          padding: .2rem .2rem .1rem;
          .comm_logo {
            width: 100%;
            margin: 0 auto;
          }
        }
        > .comm_li {
          &:first-child {
            margin-bottom: .1rem;
          }
        }
        .desc {
          margin: .1rem 0;
        }
        .spike_notime {
          box-sizing: border-box;
          margin-top: .1rem;
          .comm_li {
            margin-right: .1rem;
            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
    }
    .benefit {
      .benefit_li {
        height: 2.18rem;
        margin-top: .1rem;
        padding: .2rem;
        box-sizing: border-box;
        background-color: #fff;
      }
    }
    .activity {
      background-color: #fff;
      padding-bottom: 0;
      .activity_logo {
        width: 95%;
        margin: .1rem auto;
      }
      .activity_con {
        background-color: #eee;
        padding: .1rem;
        .activity_li {
          background-color: #fff;
          margin-left: .1rem;
          &:first-child {
            margin-left: 0;
          }
        }
      }
    }
    .farmers {
      background-color: #fff;
      .home_tab_li {
        .farmers_con {
          width: 100%;
          height: 100%;
          padding: .1rem;
          box-sizing: border-box;
        }
        &:first-child {
          margin-right: .1rem;
        }
      }
    }
    .advertisement {
      background-color: #fff;
    }
    .guess {
      background-color: #fff;
      padding-bottom: 0;
      /deep/ .yd-list-img{
        height: auto;
        padding: 0;
      }
    }
  }
</style>
